<template>
  <div class="header-menu-item" @mouseleave="() => { isShow = false }">
    <a href="javascript:;" class="link" @mouseover="() => { isShow = true }">客服</a>
    <div class="dorpdown-box left" v-show="isShow">
      <router-link :to="{path: '#'}" class="book-btn2 iconfont icon-wenhaoyuanyiwenmianxing">帮助中心</router-link>
      <span class="desc">9:00-20:30</span>
      <router-link :to="{path: '#'}" class="book-btn2 iconfont icon-liuyan">在线留言</router-link>
      <span class="desc">客服电话<span class="time">(8:00-21:00)</span></span>
      <span class="desc">010-62620698</span>
      <span class="desc">010-64755951</span>
      <span class="space"></span>
      <span class="desc">纠纷处理<span class="time">(9:00-18:00)</span></span>
      <span class="desc">010-64726856</span>
      <span class="space"></span>
      <span class="desc">图书审核 (9:00-18:00)</span>
      <span class="desc">010-62620918</span>
      <span class="space"></span>
      <router-link :to="{path: '#'}" class="book-btn2 iconfont icon-QQ">联系客服</router-link>
      <router-link :to="{path: '#'}" class="book-btn2 iconfont icon-zhongbaojiandu">监督建议</router-link>
    </div>
  </div>
</template>

<script>
import './headerMenuItem.scss'

export default {
  name: 'service',
  data () {
    return {
      isShow: false
    }
  }
}

</script>

<style lang="scss" scoped>
  .dorpdown-box {
    width: 140px;
    display: flex;
    flex-direction: column;
    .desc {
      line-height: 20px;
      .time {
        color: #AFAFAF;
      }
    }
    span.space {
      margin: 5px 0;
    }
    .book-btn2 {
      display: block;
      font-size: 12px;
      background: #F8F7F3;
      color: #000000;
      width: 100%;
      text-align: center;
      text-decoration: none;
      border: 1px solid #AFAFAF;
      margin-bottom: 5px;
      cursor: pointer;
      &.iconfont {
        &::before {
          color: #A5806D;
        }
      }
      &:hover, :active, :focus {
        color: #A5806D;
        border-color: #A5806D;
      }
    }
  }
</style>
